<template>
    <div class="container" v-cloak>
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <div class="header">
                <div class="title" flex="main:justify cross:center"
                     :style="{paddingBottom:videoInfo.content!==''?0.06+'rem':''}">
                    <div flex="main:center cross:center">
                        <img :src="userDetail.userPhoto+'?imageView2/0/w/80/format/jpeg'" class="titlePhoto" v-if="userDetail.userPhoto"/>
                        <div>
                            <div class="Medium font13" v-text="userDetail.userName"></div>
                            <div class="des">上传于<span v-text="videoInfo.createTime"></span>；共<span
                                    v-text="dataList.length"></span>张图片
                            </div>
                        </div>
                    </div>
                    <img src="../../images/share.png" class="shareIcon" @click="allShare()"/>
                </div>
                <div class="font13 videoTitle" v-html="videoInfo.title" v-if="videoInfo.title"></div>
                <div class="font13 opacity8" v-html="videoInfo.content" v-if="videoInfo.content"></div>
            </div>
            <ul class="dataList" v-if="!picesView">
                <li class="dataItem" v-for="(list,index) in dataList" :key="list.tid">
                    <img v-lazy="imagedomain+list.imgUrl+'?imageView2/0/w/750/format/jpeg'"  class="pices" flex="main:center" v-if="list.type==1" @click="clientSwiper(dataList,index)"/>
                    <div class="picesVideo" flex="main:center" v-if="list.type==3"
                         @click="clientSwiper(dataList,index)">
                        <img v-lazy="imagedomain+list.imgUrl+'?vframe/jpeg/offset/1/w/750/'" class="picesImg"/>
                        <img src="../../images/play.png" class="play"/>
                    </div>
                    <div flex="main:justify cross:center" class="userCtrl">
                        <div flex="main:center">
                            <div flex="main:center cross:center">
                                <img src="../../images/zan.png" class="zan" v-if="list.praiseState==0"
                                     @click="changePraise(list)"/>
                                <img src="../../images/zan_sel.png" class="zan" v-if="list.praiseState==1"
                                     @click="changePraise(list)"/>
                                <div class="font12" style="margin-right:0.23rem">点赞</div>
                            </div>
                            <div flex="main:center cross:center" @click="setComment(index,list.tid)">
                                <img src="../../images/comment.png" class="comment"/>
                                <div class="font12">评论</div>
                            </div>
                        </div>
                        <div flex="main:center cross:center">
                            <div class="font12">认领</div>
                            <div class="unClaim" v-if="list.claimState==0" @click="changeClaim(list)"></div>
                            <div class="claim" flex="main:center cross:center" v-if="list.claimState==1"
                                 @click="changeClaim(list)">
                                <img src="../../images/claimIcon.png" class="claimIcon"/>
                            </div>
                        </div>
                    </div>
                    <div class="dataMsg" flex>
                        <div v-text="list.claimCount+'认领;'"></div>
                        <div v-text="list.shareCount+'分享;'"></div>
                        <div v-text="list.praiseCount+'赞'"></div>
                    </div>
                    <div class="picesText" v-html="list.content" v-if="list.content"></div>
                    <div class="commentList" >
                        <commentList :commentObj="list" :type="'APP_VEDIO'" :index="index"
                                     :classId="classId" ref="commentMethod"></commentList>
                    </div>
                    <share :piceIds="list.tid" :shareCode="'APP_VIDEO_PIC'" imgUrl="list.type==1?imagedomain+list.imgUrl:imagedomain+list.imgUrl+'?vframe/jpeg/offset/1/w/80'" :shareUrl="shareUrl" :index="index"></share>
                </li>
            </ul>
            <ul class="picesList" v-if="picesView">
                <li v-for="(list,index) in dataList" :key="list.tid">
                    <div class="picesImgWrap" @click="clientSwiper(dataList,index)">
                        <img v-lazy="imagedomain+list.imgUrl+'?imageView2/0/w/300/format/jpeg'" class="picesImg" v-if="list.type==1"/>
                        <img v-lazy="imagedomain+list.imgUrl+'?vframe/jpeg/offset/1/w/300/'" class="picesImg"
                             v-if="list.type==3"/>
                        <img src="../../images/play.png" class="play" v-if="list.type==3"/>
                    </div>
                    <div flex="main:right" class="picesBottom">
                        <div flex="main:center cross:center">
                            <img src="../../images/zan.png" class="zan" v-if="list.praiseState==0"
                                 @click="changePraise(list)"/>
                            <img src="../../images/zan_sel.png" class="zan" v-if="list.praiseState==1"
                                 @click="changePraise(list)"/>
                            <div class="font12" style="margin-right:0.23rem">点赞</div>
                        </div>
                        <div flex="main:center cross:center">
                            <div class="font12">认领</div>
                            <div class="unClaim" v-if="list.claimState==0" @click="changeClaim(list)"></div>
                            <div class="claim" flex="main:center cross:center" v-if="list.claimState==1"
                                 @click="changeClaim(list)">
                                <img src="../../images/claimIcon.png" class="claimIcon"/>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script type="text/babel">
    import API from '../../../api/api.js'
    import {imagedomain} from '../../../api/api.js'
    import share from '../../../components/share.vue'
    import commentList from '../../../components/commentList.vue'
    const api = new API();
    export default{
        data(){
            return {
                imagedomain: imagedomain,
                dataList: [],
                picesView: false,
                videoInfo: {},
                userDetail: '',
                classId: this.$route.query.classId,
                appId: this.$route.query.appId ? this.$route.query.appId : this.$route.query.tid,
                role: this.$route.query.role,
                organization:'',
                className:''
            }
        },
        mounted(){
            this.$util.jsBridgeCallBack('jsLeftAction', this.closeWebView);
            this.$util.jsBridgeCallBack('jsRightAction', this.changeView);
            this.$nextTick(function(){
                setTimeout(()=>{
                    this.propsTitle();
                },300)
                this.getData();
            })
        },
        methods: {
            changeView(){
                this.picesView = !this.picesView;
                this.$nextTick(function () {
                    document.documentElement.scrollTop=1;
                    document.body.scrollTop=1;
                })
            },
            closeWebView(){
                this.$util.JsBridge('closeWebView', {}, ()=> {})
                this.$util.JsBridge('refreshAppCellInfo',{},()=>{})
            },
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: '课堂风采',
                    titleRight: '视图切换',
                }, (res) => {
                })
            },
            getData(){
                let param = {
                    page: 1,
                    classId: this.classId,
                    tid: this.appId,
                    role: this.role
                };
                api.getVideoDetail(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        if (rs.pager.pageList.length > 0) {
                            this.videoInfo.createTime = this.$util.changeDate(rs.pager.pageList[0].createTime)
                            this.dataList = rs.pager.pageList;
                        }else{
                            this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/detail',api:'getVideoDetail',success:false,data:res}));
                        }
                        this.dataList.map((e)=>{
                            if(!e.commentList){
                                this.$set(e,'commentList',[])
                            }
                        })
                        this.organization=rs.organization;
                        this.className=rs.className;
                        this.shareUrl=rs.shareUrl;
                        this.userDetail = rs.userDetail;
                        if(this.userDetail.userPhoto===''){
                            this.userDetail.userPhoto=this.$util.getDefaultHeader(this.userDetail.userId)
                        }
                        this.videoInfo.content = rs.content;
                    }
                    this.$nextTick(function () {
                        document.documentElement.scrollTop=1;
                        document.body.scrollTop=1;
                    })
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/detail',api:'getVideoDetail',success:false,data:'网络异常'}));
                })
            },
            changePraise(obj){
                let param = {
                    state: obj.praiseState,
                    picId: obj.tid,
                    classId: this.classId,
                    role: this.role
                }
                api.changePraise(param).then(res => {
                    let {code} = res;
                    if (code == 200) {
                        obj.praiseState == 0 ? obj.praiseState = 1 : obj.praiseState = 0;
                        obj.praiseState == 0 ? obj.praiseCount-- : obj.praiseCount++;
                    }else{
                        this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/detail',api:'changePraise',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/detail',api:'changePraise',success:false,data:'网络异常'}));
                })
            },
            changeClaim(obj){
                let param = {
                    picId: obj.tid,
                    classId: this.classId,
                    role: this.role
                }
                obj.claimState == 0 ?
                    api.setClaim(param).then(res => {
                        let {code} = res;
                        if (code == 200) {
                            obj.claimState = 1;
                            obj.claimCount++;
                        }else{
                            this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/detail',api:'setClaim',success:false,data:res}));
                        }
                    }).catch(()=>{
                        this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/detail',api:'setClaim',success:false,data:'网络异常'}));
                    }) :
                    api.cancelClaim(param).then(res => {
                        let {code} = res;
                        if (code == 200) {
                            obj.claimState = 0;
                            obj.claimCount--;
                        }else{
                            this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/detail',api:'cancelClaim',success:false,data:res}));
                        }
                    }).catch(()=>{
                        this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/detail',api:'cancelClaim',success:false,data:'网络异常'}));
                    })
            },
            clientSwiper(pices, index){
                let arr = Array.prototype.toString.call(pices) === '[object String]' ? JSON.parse(JSON.stringify(JSON.parse(pices))) : JSON.parse(JSON.stringify(pices))
                arr.forEach(function (e) {
                    e.imgUrl = imagedomain + e.imgUrl;
                    if (e.type == 3) {
                        e.coverUrl = imagedomain + e.imgUrl + '?vframe/jpeg/offset/1';
                    }
                });
                this.$util.JsBridge('picesSwiper', {
                    picesList: arr,
                    picesIndex: index
                }, (res) => {
                })
            },
            allShare(){
                this.$util.JsBridge('toSharePices', {
                    appCode: 'APP_VEDIO',
                    tid: this.appId,
                    classId: this.classId
                }, (res) => {
                })
            },
            setComment(index, replyId){
                this.$util.JsBridge('setComment', {
                        limit: 500,
                        placeHolder: '请输入500字以内评论'
                    }, (result) => {
                        let data = {};
                        if (result.content === '') {
                            this.$toast('评论内容不能为空')
                        } else {
                            data.type = result.type;
                            if (data.type == 2) {
                                data.time = result.time;
                            }
                            data.content = this.$util.utf16toEntities(result.content)
                            const param = {
                                classId: this.classId,
                                type: data.type,
                                appId: this.appId,
                                secId: replyId,
                                content: data.content,
                                appCode: 'APP_VEDIO'
                            }
                            if (result.type == 2) {
                                param.time = result.time;
                            }
                            let response = api.setComment(param);
                            response.then((res) => {
                                let {code, rs} = res;
                                if (code === 200) {
                                    this.$refs.commentMethod[index].sonSetComment(rs);
                                }else{
                                    this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/detail',api:'setComment',success:false,data:res}));
                                }
                            }).catch(()=>{
                                this.$util.sendLog(1,'APP_VIDEO',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂风采',code:'APP_VIDEO',path: '/app/video/detail',api:'setComment',success:false,data:'网络异常'}));
                            })
                        }
                    }
                )
            },
        },
        components: {
            share,
            commentList
        }

    }
</script>
<style scoped lang="scss">
    .container {
        width: 100%;
        height: 100%;
        background: #000;
        position: relative;
    }

    .dataItem {
        position: relative;
        padding: 0 0.12rem;
        border-bottom: 0.12rem solid rgba(0, 0, 0, .16);
    }

    .header {
        padding: 0 0.12rem 0 0.12rem;
    }
    .videoTitle{
        padding-top:0.12rem;
        padding-bottom:0.08rem;
    }
    .title {
        padding-top: 0.12rem;
        .titlePhoto {
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 100%;
            margin-right: 0.12rem;
        }
        .shareIcon {
            width: 0.18rem;
            height: 0.17rem;
        }
    }

    .pices {
        margin-top: 0.08rem;
        width: 3.5rem;
        position: relative;
        background: #d8d8d8;
    }

    .picesVideo {
        margin-top: 0.08rem;
        width: 3.5rem;
        position: relative;
        height: 1.7rem;
        overflow: hidden;
        .picesImg {
            background: #d8d8d8;
            width: 100%;
            height: 100%;
            object-fit: cover;
            -o-object-fit: cover;
        }
    }

    .userCtrl {
        padding-top: 0.16rem;
        padding-bottom: 0.12rem;
    }

    .zan {
        width: 0.17rem;
        margin-right: 0.08rem;
    }

    .comment {
        width: 0.18rem;
        margin-right: 0.08rem;
    }

    .commentList {
        padding-bottom: 0.12rem;
    }

    .claim {
        background: url("../../images/claim.png")0 0 no-repeat;
        background-size: 0.14rem 0.14rem;
        width: 0.16rem;
        height: 0.16rem;
        margin-left: 0.08rem;
    }

    .claimIcon {
        width: 0.12rem;
    }

    .unClaim {
        background: url("../../images/unClaim.png")0 0 no-repeat;
        background-size: 0.14rem 0.14rem;
        width: 0.16rem;
        height: 0.16rem;
        margin-left: 0.08rem;
    }

    .dataMsg {
        opacity: 0.5;
        font-size: 0.1rem;
        letter-spacing: 0.006rem;
    }
    .newTitle{
        padding: 0.08rem 0;
    }
    .picesText {
        font-size: 0.12rem;
        line-height: 0.18rem;
        margin-top: 0.12rem;
    }

    .picesList {
        padding-bottom: 0.04rem;
        overflow: hidden;
        li {
            position: relative;
            margin-left: 0.04rem;
            margin-top: 0.04rem;
            float: left;
            .picesImgWrap {
                width: 1.82rem;
                height: 1.82rem;
                background: #d8d8d8;
                overflow: hidden;
                .picesImg{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    -o-object-fit: cover;
                }
            }
            .picesBottom {
                background: rgba(255, 255, 255, .1);
                width: 100%;
                height: 0.32rem;
                padding-right: 0.12rem;
            }
        }
    }
</style>
